<template>
	<view class="price-description-component">
		<hsb-common-popup-header
			title="价格说明"
			@close="$emit('close')"
		/>
		<view class="price-description-body">
			<scroll-view
				scroll-y="true"
				class="price-description-scroll-view"
			>
				<view class="description-content">
					<view class="description-header">
						<view class="header-title">优惠说明</view>
						<view class="header-desc">最终优惠以检测结果为准</view>
					</view>
					<view class="prices-detail">
						<view class="prices-detail-item">
							<text>预估回收价</text>
							<text>¥{{ quotationValue }}</text>
						</view>
						<view v-if="addConpouValue > 0" class="prices-detail-item">
							<text>{{ discountInfo.addConpous.activityName || '满加活动' }}</text>
							<text>¥{{ addConpouValue }}</text>
						</view>
						<view v-if="useConpouValue > 0" class="prices-detail-item">
							<text>{{ discountInfo.useConpous.couponsName || '加价券' }}</text>
							<text>¥{{ useConpouValue }}</text>
						</view>
						<view class="prices-detail-item total">
							<text>预估可卖</text>
							<text>¥{{ total }}</text>
						</view>
					</view>
					<view class="description-header">
						<view class="header-title">价格走势</view>
						<view class="header-desc">发售时间、品牌、折旧情况都会影响价格</view>
					</view>
					<view class="prices-trend">
						<view class="prices-curve">
							<view class="curve-image">
								<image class="icon-curve" src="@/static/images/icon_prices_trend.png"></image>
							</view>
							<template
								v-if="priceHistory.length > 0"
							>
								<view v-if="priceHistory[0]" class="prev-week">上周<text class="curve-txt">¥{{ priceHistory[0].price / 100 || 0 }}</text></view>
								<view v-if="priceHistory[1]" class="current-week">现在<text class="curve-txt">¥{{ priceHistory[1].price / 100 || 0 }}</text></view>
								<view v-if="priceHistory[2]" class="next-week">下周<text class="curve-txt">¥{{ priceHistory[2].price / 100 || 0 }}</text></view>
								<view class="next-week-down">
									<image class="icon-down" src="@/static/images/icon_prices_down.png"></image>
									<text class="down-txt">下跌</text>
									<text class="curve-txt">¥{{ devalue.diffPrice / 100 || 0 }}</text>
								</view>
							</template>
						</view>
					</view>
					<view class="description-header">
						<view class="header-title">您的选项</view>
						<view class="header-desc">标红项对价格影响较大</view>
					</view>
					<view class="model-info">
						<view class="model-description">
							<view class="model-name">iPhone 15</view>
							<view class="model-skus">{{ skuListStr }}</view>
						</view>
						<view class="model-sku-list">
							<view
								v-for="(sku, index) in productSkuList"
								:key="index"
								class="model-sku-item"
							>
								{{ sku }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		evInfo: Object,
		priceHistory: Array,
		discountInfo: Object,
		productSkuList: Array
	},
	computed: {
		skuListStr () {
			return this.productSkuList.join('/')
		},
		quotationValue () {
			return this.evInfo.quotation / 100 || 0
		},
		addConpouValue () {
			return this.discountInfo.addConpous?.couponMoney / 100 || 0
		},
		useConpouValue () {
			return this.discountInfo.useConpous?.couponsValue / 100 || 0
		},
		total () {
			return this.quotationValue + this.addConpouValue + this.useConpouValue
		},
		devalue () {
			return this.priceHistory.reduce((last, current) => {
				return {
					price: Number(current.price || 0),
					diffPrice: Number(last.price || 0) - Number(current.price || 0)
				}
			}, {})
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>